import React, { useEffect, useMemo } from 'react';
import { Menu } from 'antd';
import { history, connect } from 'umi';
import SystemName from '@/components/SystemName';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { getOriginalPath } from '@/utils/routeFormat';
import { formatTree } from '@/utils/utils';
import './index.less';

export default connect(
  ({ global, menu }) => ({
    pathname: menu.pathname,
    crumbList: menu.crumbList,
    collapsed: global.collapsed,
    drawerMenuVisible: global.drawerMenuVisible,
  }),
  (dispatch) => ({
    toggleMenuCollapsed: (status) =>
      dispatch({ type: 'global/layout', payload: { collapsed: !!status } }),
    toggleDrawerMenuVisible: (payload) =>
      dispatch({ type: 'global/toggleDrawerMenuVisible', payload }),
  }),
)(
  ({
    theme,
    navTheme,
    collapsed,
    layout,
    fixSiderbar,
    headerRender,
    primaryColor,
    isMobile,
    siderWidth,
    pathname,
    menuData,
    crumbList,
    menuHeaderRender,
    drawerMenuVisible,
    toggleMenuCollapsed,
    toggleDrawerMenuVisible,
  }) => {
    const fillBackgroundColor = theme === 'dark';
    const systemTextColor = fillBackgroundColor ? 'rgba(255,255,255,.8)' : primaryColor;
    const defaultOpenKeys = useMemo(() => {
      const keyList = _.map(crumbList, 'key');
      keyList.pop();
      return keyList;
    }, []);
    const currentMenuData = useMemo(
      () =>
        formatTree(menuData, ({ id, key, icon, title, label, path }) => ({
          id,
          key,
          icon,
          title,
          label,
          path,
        })),
      [menuData],
    );

    return (
      <>
        {!!fixSiderbar && !isMobile && (
          <div
            style={{
              width: `${collapsed ? 60 : siderWidth}px`,
              maxWidth: `${collapsed ? 60 : siderWidth}px`,
              minWidth: `${collapsed ? 60 : siderWidth}px`,
              flex: `0 0 ${collapsed ? 60 : siderWidth}px`,
              transition:
                'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s',
            }}
          />
        )}
        {!!isMobile && (
          <div
            className="sub-menu-drawer-wrapper"
            style={{
              pointerEvents: drawerMenuVisible && isMobile ? 'auto' : 'none',
              opacity: drawerMenuVisible ? 1 : 0,
            }}
            onClick={() => {
              toggleDrawerMenuVisible(false);
            }}
          />
        )}
        <aside
          className={`ant-layout-sider ant-layout-sider-light ant-pro-sider ${
            !fixSiderbar && !isMobile ? null : 'ant-pro-sider-fixed'
          } ant-pro-sider-layout-side ant-pro-sider-light`}
          style={_.assign(
            {
              zIndex: isMobile ? 999 : 20,
              flex: `0 0 ${collapsed ? 60 : siderWidth}px`,
              width: `${collapsed ? 60 : siderWidth}px`,
              maxWidth: `${collapsed ? 60 : siderWidth}px`,
              minWidth: `${collapsed ? 60 : siderWidth}px`,
              paddingTop: isMobile || layout !== 'mix' || headerRender === false ? 0 : '48px',
              transform: `translateX(${isMobile && !drawerMenuVisible ? siderWidth * -1 : 0}px)`,
            },
            navTheme === 'realDark' ? { boxShadow: '0 0 8px 0 rgba(13,13,13,.65)' } : null,
          )}
        >
          <div
            className="ant-layout-sider-children"
            style={fillBackgroundColor ? { backgroundColor: '#001529' } : null}
          >
            {(isMobile || layout !== 'mix') && menuHeaderRender !== false && (
              <SystemName
                collapsed={collapsed}
                textColor={systemTextColor}
                systemTextWidth={siderWidth - 72}
              />
            )}

            <div
              style={{ flex: '1 1 0', overflow: 'hidden auto' }}
              className={`${fillBackgroundColor ? 'menu-scroll-view-dark' : null}`}
            >
              <Menu
                mode="inline"
                items={currentMenuData}
                inlineCollapsed={collapsed}
                defaultOpenKeys={defaultOpenKeys}
                selectedKeys={getOriginalPath(pathname)}
                theme={fillBackgroundColor ? 'dark' : 'light'}
                onClick={({ key }) => {
                  if (getOriginalPath(pathname) !== key) {
                    history.push(key);
                  }
                  if (isMobile) {
                    toggleDrawerMenuVisible(false);
                  }
                }}
              />
            </div>
            {!isMobile && (
              <div
                title={'切换菜单折叠'}
                className={`side-menu-collapsed-btn ${
                  fillBackgroundColor ? 'side-menu-collapsed-btn-dark' : null
                }`}
                onClick={() => {
                  toggleMenuCollapsed(!collapsed);
                }}
              >
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              </div>
            )}
          </div>
        </aside>
      </>
    );
  },
);
